<template>
  <!-- 
    需求 : 父组件内 使用子组件内的变量
    原理: VUE中的作用域插槽可以让父组件使用插槽时插槽内容能够访问子组件中的数据
    步骤: 
    1. 将子组件的数据绑定到插槽 slot 的属性上
    2. 使用组件 用template渲染插槽 用v-slot="自定义变量名"接收slot所有的属性和值
   -->


  <div id="container">
    <div id="app">
      <h3>案例：折叠面板</h3>
      <Pannel>
        <!-- 需求: 插槽时 使用子组件内的变量 -->
        <!-- 2.  v-slot="自定义变量名" 这个变量会获取slot所有的属性和值  v-slot= 不能简写-->
        <template v-slot="scope">
          <p>{{ scope.row.defaultTwo }}</p>
        </template>
      </Pannel>

       <Pannel>
        <!-- 没有传值 显示默认值 -->
      </Pannel>
    </div>
  </div>
</template>

<script>

import Pannel from "../components/04/Pannel";
export default {
  components: {
    Pannel,
  },
};
</script>

<style>
#app {
  width: 400px;
  margin: 20px auto;
  background-color: #fff;
  border: 4px solid blueviolet;
  border-radius: 1em;
  box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.5);
  padding: 1em 2em 2em;
}
</style>